<script setup lang="ts">
import { reactive, ref } from "vue";
import { Field, Form } from "vee-validate";
import validates from "@/utils/validates.ts";
import { LoginParams } from "@/types/userTypes/userTypes.ts";
import useUserStore from "@/pinia/modules/userStore/userStore.ts";
import { ElMessage } from "element-plus";
import { Router, useRouter } from "vue-router";
import useShopCartStore from "@/pinia/modules/shopCartStore/shopCartStore.ts";

interface Props {
   nickname?: string;
   avatar?: string;
   unionId?: string;
}

const props = defineProps<Props>();

const router: Router = useRouter();

const useStore = useUserStore();

const shopCartStore = useShopCartStore();

const formRef = ref();

const formData = reactive<LoginParams>({
   mobile: "",
   code: "",
});

const formRules = {
   ...validates,
};

const sendCode = async () => {
   const validate: string | boolean = formRules.mobile((formData.mobile as string));
   if (typeof validate !== "boolean") return;
   try {
      const code: string = await useStore.qqBindSendCode((formData.mobile as string));
      formData.code = code;
      ElMessage.success("验证码发送成功");
   } catch (error: any) {
      ElMessage.error(error.message);
   }
};

const handleBind = async () => {
   const validate: boolean = await formRef.value.validate();
   if (!validate) return;
   try {
      const bindResult = await useStore.qqBindMobile((formData.mobile as string), (formData.code as string), props.unionId as string);
      await shopCartStore.mergeCart();
      ElMessage.success(bindResult);
      router.push("/");
   } catch (error: any) {
      ElMessage.error(error.result);
   }
};



</script>

<template>
   <Form class="xtx-form" ref="formRef" :validation-schema="formRules" v-slot="{errors}">
      <div class="user-info">
         <img :src="avatar" alt="" />
         <p>Hi，{{ nickname }} 欢迎来到小兔鲜，完成绑定后可以QQ账号一键登录哦~</p>
      </div>
      <div class="xtx-form-item">
         <div class="field">
            <i class="icon iconfont icon-phone"></i>
            <Field :class="{err:errors.mobile}" class="input" type="text" placeholder="绑定的手机号" name="mobile" v-model="formData.mobile" />
         </div>
         <div class="error" v-if="errors.mobile">{{ errors.mobile }}</div>
      </div>
      <div class="xtx-form-item">
         <div class="field">
            <i class="icon iconfont icon-code"></i>
            <Field :class="{err:errors.code}" class="input" type="text" placeholder="短信验证码" name="code" v-model="formData.code" />
            <span class="code" @click="sendCode">发送验证码</span>
         </div>
         <div class="error" v-if="errors.code">{{ errors.code }}</div>
      </div>
      <a class="submit" @click="handleBind">立即绑定</a>
   </Form>
</template>

<style scoped lang="less">
.user-info {
   width: 320px;
   height: 70px;
   margin: 0 auto;
   display: flex;
   background: #f2f2f2;
   align-items: center;
   padding: 0 10px;
   margin-bottom: 25px;

   img {
      background: #f2f2f2;
      width: 50px;
      height: 50px;
   }

   p {
      padding-left: 10px;
   }
}

.code {
   position: absolute;
   right: 0;
   top: 0;
   line-height: 50px;
   width: 80px;
   color: #999;

   &:hover {
      cursor: pointer;
   }
}
</style>
